<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/head'/}
<style>
    .layui-form-item .layui-input-inline {
        width: 400px;
    }
</style>
<body>
<div class="layui-fluid">
    <table class="layui-table">
        <colgroup>
            <col width="80">
            <col width="200">
            <col width="300">
            <col width="100">
        </colgroup>
        <thead>
        <tr>
            <th>网站类型</th>
            <th>网站名称</th>
            <th>网站地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">
                网站类型</label>
            <div class="layui-inline layui-form">
                <!--                <input class="radios" type="radio" name="type" value="相关单位" title="相关单位" checked>-->
                <!--                <input class="radios" type="radio" name="type" value="合作单位" title="合作单位">-->
                <!--                <input class="radios" type="radio" name="type" value="交易机构" title="交易机构">-->
                <select name="type" lay-verify="type">
                    <option value="">请选择网站类型</option>
                    <option value="相关单位">相关单位</option>
                    <option value="合作单位">合作单位</option>
                    <option value="交易机构">交易机构</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                网站名称</label>
            <div class="layui-input-inline">
                <input value="" type="text" name="web_name" required=""
                       lay-verify="webname" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                网站地址</label>
            <div class="layui-input-inline">
                <input value="http://www.baidu.com" type="text" name="url" required=""
                       lay-verify="url" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button class="layui-btn layui-btn-normal  layui-btn-sm" lay-filter="add" lay-submit="">添加网站</button>
        </div>
    </form>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    let url = {
        unitsEdit: '/admin/info/unitsEdit'
    }
    let arr = {
        'xgdw': [],
        'hzdw': [],
        'jyjg': [],
    }
    start()

    async function start() {
        let res = await getUnits()
        arr['xgdw'] = res.hasOwnProperty('xgdw') ? res['xgdw'] : []
        arr['hzdw'] = res.hasOwnProperty('hzdw') ? res['hzdw'] : []
        arr['jyjg'] = res.hasOwnProperty('jyjg') ? res['jyjg'] : []
        render(arr)
        let {arrAfter, layer} = await layuiUse(arr)
        await submit(arrAfter, layer)
        await start()
    }

    function getUnits() {
        return new Promise(resolve => {
            $.post(url.unitsEdit, '', res => {
                if (res.status === config.success) {
                    resolve(res.result)
                }
            })
        })
    }

    $("input[type='radio']").change((obj) => {
        console.log(123)
    })

    function layuiUse(arr) {
        return new Promise(resolve => {
            layui.use(['layer', 'jquery', 'form'], function () {
                $ = layui.jquery;
                var layer = layui.layer,
                    form = layui.form
                form.verify({
                    webname: function (value) {
                        if (value.length < 2) {
                            return '网站名称至少得2个字符啊';
                        }
                    },
                    type: function (value) {
                        if (value.length === 0) {
                            return '请选择网站类型';
                        }
                    },
                })


                form.on('submit(add)', (data) => {
                    data.type = $('.radios:checked').val()
                    data = data.field
                    console.log('type: ' + data.type)
                    switch (data.type) {
                        case '相关单位':
                            arr['xgdw'].push(data)
                            resolve({arrAfter: arr, layer})
                            break;
                        case '合作单位':
                            arr['hzdw'].push(data)
                            resolve({arrAfter: arr, layer})
                            break;
                        case '交易机构':
                            arr['jyjg'].push(data)
                            resolve({arrAfter: arr, layer})
                            break;
                    }
                    return false;
                })
            });
        })
    }

    function submit(arr, layer) {
        return new Promise(resolve => {
            $.post(url.unitsEdit, {units: arr}, (res) => {
                if (res.status === config.success) {
                    layer.alert("添加成功", {icon: 6})
                    resolve()
                }
            })
        })
    }


    function render(arr) {
        let html1 = ''
        let html2 = ''
        let html3 = ''
        $.each(arr['xgdw'], (i, val) => {
            html1 = html1 + `<tr bgcolor="#ffb6c1">
                    <td>${val['type']}</td>
                    <td>${val['web_name']}</td>
                    <td>${val['url']}</td>
                    <td><a onclick="del(this,'xgdw',${i})" href="javascript:;">删除</a></td>
                    </tr>`
        })
        $.each(arr['hzdw'], (i, val) => {
            html2 = html2 + `<tr bgcolor="#f0ffff">
                    <td>${val['type']}</td>
                    <td>${val['web_name']}</td>
                    <td>${val['url']}</td>
                    <td><a onclick="del(this,'hzdw',${i})" href="javascript:;">删除</a></td>
                    </tr>`
        })
        $.each(arr['jyjg'], (i, val) => {
            html3 = html3 + `<tr bgcolor="#fff8dc">
                    <td>${val['type']}</td>
                    <td>${val['web_name']}</td>
                    <td>${val['url']}</td>
                    <td><a onclick="del(this,'jyjg',${i})" href="javascript:;">删除</a></td>
                    </tr>`
        })
        let html = html1 + html2 + html3
        $('tbody').html(html)
        $('form input').val('')
    }

    function del(obj, type, i) {
        layer.alert("确认删除？", {icon: 6}, () => {
            $(obj).parent().parent().remove()
            arr[type].splice(i, 1)
            $.post(url.unitsEdit, {units: arr}, (res) => {
                if (res.status === config.success) {
                    layer.msg('删除成功', {icon: 1})
                }
            })
        })
    }
</script>
</body>

</html>